<template>
  <Modal
    v-model="picFlag"
    :title="'查看图片'"
    :mask-closable="true"
    width="950"
  >
    <img style="width: 100% ;" :src="imgUrl" alt="" />
    <template #footer>
      <div style="display: flex; justify-content: space-between;">
        <div style="display: flex;">
          <Button @click="toPre" v-if="imgIndex > 0">上一张</Button>
          <Button @click="toNext" v-if="imgIndex < imgList.length - 1">下一张</Button>
        </div>
        <Button type="primary" @click="picFlag = false">关闭</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
  export default {
    data() {
      return {
        picFlag: false,
        imgList: [],
        imgIndex: 0
      };
    },
    computed: {
      imgUrl() {
        return this.imgList[this.imgIndex] || '';
      }
    },
    methods: {
      showModal(imgList) {
        this.picFlag = true;
        this.imgList = imgList;
      },
      toPre() {
        if (this.imgIndex > 0) {
          this.imgIndex--;
        }
      },
      toNext() {
        if (this.imgIndex < this.imgList.length - 1) {
          this.imgIndex++;
        }
      }
    }
  };
</script>

<style lang="less" scoped>
  .box {
  }
</style>
